<template>
	<view class="smart-page">
		<view class="smart-page-head">
			<view class="smart-page-head-title">picker选择列表</view>
		</view>
		<view>
			<view class="title">普通选择器</view>
			<view class="item">
				<view class="item-title">当前选择</view>
				<view class="item-picker">
					<picker @change="bindPickerchange" mode="selector" :range="array" range-key="cname">
						{{array[index].cname}}
						</picker>
					</view>
				</view>
			</view>
		<view>
			<view class="title">日期选择器</view>
			<view class="item">
			<view class="item-title">当前选择</view>
			<view class="item-picker">
				<picker @change="bindDatePickerchange" mode="date">{{choiceDate}}</picker>
			</view>
		</view>
	</view>
			<view>
			<view class="title">时间选择器</view>
			<view class="item">
			<view class="item-title">当前选择</view>
			<view class="item-picker">
			<picker @change="bindTimePickerchange" mode="time">{{time}}</picker>
			</view>
			</view>
			</view>
			</view>
</template>

<script>
	export default{
		date(){
			return{
				array:[{
					id:1,
					cname:'中国'
				},{
					id:2,
					cname:'美国'
				},{
					id:3,
					cname:'巴西'
				}],
				index:0,
				choiceDate:'2021-4-23',
				time:'12:00'
			}
		},
		methods:{
			bindPickerChange:function(e){
				console.log(e.detail.value);
				this.index = e.detail.value;
			},
			bindDatePickerChange(e){
				this.choiceDate = e.detail.value;
			},
			bindTimePickerChange(e){
				this.time=e.detail.value;
			}
		}
	}
</script>

<style>
	view>
	<view class="title">日期选择器</view>
	<view class="item">
	<view class="item-title">当前选择</view><view class="item-picker''><picker @change="bindDatePickerchange" mode="date">{{choiceDate}}</picker></view></viewp>
	</view>
	<view>
	<view class="title">时间选择器</view>
	<view class="item">
	<view class="item-title">当前选择</view>
	<view class="item-picker">
	<picker @change="bindTimePickerchange"mode="time">{{time}}</picker></view>
	</view>
	</view>
	</view>
</style>